<template>
    <a-layout-header>
        <div class="header">
            <div>
                <a-button
                    class="ml12"
                    v-for="item in tab"
                    :key="item.path"
                    :type="item.path === active ? 'primary' : 'text'"
                    :icon="h(item.icon)"
                    @click="handleClick(item.path)"
                >
                    {{ item.title }}
                </a-button>
            </div>
        </div>
    </a-layout-header>
</template>

<script setup lang="ts">
import {h, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {weChatRouter} from "@/router/router";
import {handleGetData} from "@/router/config";

const tab = handleGetData(weChatRouter);
const active = ref("");
const list = weChatRouter.map(route => route.path);
const nav = useRouter();

const handleClick = path => {
    nav.push({path});
};

watch(
    () => nav.currentRoute.value,
    route => {
        const path = route.path;
        if (list.includes(path)) {
            active.value = path;
        }
    },
    {immediate: true}
);
</script>

<style scoped lang="less">
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
</style>
